<template>
  <!-- 运营核实-->
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="120px">
      <el-form-item label="房源方姓名">
        <el-input
          v-model="queryParams.realName"
          placeholder="请输入房源方姓名"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="房源方手机号">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入房源方手机号"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="所属门店品牌">
        <el-input
          v-model="queryParams.brand"
          placeholder="请输入所属门店品牌"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="所属小区">
        <el-input
          v-model="queryParams.resblockName"
          placeholder="请输入所属小区"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" size="mini" @click="shelves">批量下架</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      border
      :data="tableList"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column label="房源ID">
        <template slot-scope="scope">
          <span>{{ scope.row.cooperationId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房源方手机号">
        <template slot-scope="scope">
          <span>{{ scope.row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房源图片" width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.houseImg == undefined || scope.row.houseImg == '' || scope.row.houseImg == null">
            <span>暂无图片资料</span>
          </div>
          <div v-else>
            <el-popover placement="left" title="" trigger="hover">
              <el-image
                slot="reference"
                :src="scope.row.houseImg"
                :alt="scope.row.houseImg"
                style="max-height: 70px; max-width: 100px"
              ></el-image>
              <el-image :src="scope.row.houseImg" style="height: 500px; width: 500px"></el-image>
            </el-popover>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="房源标题">
        <template slot-scope="scope">
          <span>
            {{ scope.row.resblockName + scope.row.room + "室" + scope.row.hall + "厅"}}{{scope.row.delegationType === "RENT"? scope.row.totalPrices + "元/月": scope.row.totalPrices / 10000 + "万"}}{{ scope.row.buildSize + "㎡" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="房源创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime ? parserDate(scope.row.createTime) : "---" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房态更新时间">
        <template slot-scope="scope">
          <span>{{ scope.row.confirmTime ? parserDate(scope.row.confirmTime) : "---" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="房源方姓名">
        <template slot-scope="scope">
          <span>{{ scope.row.realName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="门店品牌">
        <template slot-scope="scope">
          <span>{{ scope.row.shop }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="80" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="previewInformation(scope.row)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.currentPage"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

  </div>
</template>

<script>
import { runToVerifyList, downList } from "@/api/reviewActivities/runToVerify";
export default {
  components: {  },
  data() {
    return {
      popVisible: false,
      //表单数据
      queryParams: {
        currentPage: 1,
        pageSize: 10,
        realName: "",
        mobile: "",
        brand: "",
        resblockName: "",
      },
      tableList: [], //列表数据
      total: 0, //总条数
      loading: false,
      cooperationIdList: [],
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    // hanldeRefresh() {
    //   this.popVisible = false;
    // },
    //   搜索
    handleQuery() {
      this.getList({ page: 1 });
    },
    // 批量下架
    async shelves() {
      if (this.cooperationIdList.length === 0) {
        this.$message({
          message: "请选择批量下架的房源",
        });
        return;
      }
      this.$confirm("请确认是否下架？下架原因默认为：虚假/不可合作房源", "房源下架", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let shelvesOk = await downList({ cooperationIds: this.cooperationIdList });
          if (shelvesOk.code == 200 && shelvesOk.data.isSuccess) {
            await this.getList({ page: 1 });
            this.$message({
              message: "批量下架成功",
              type: "success",
            });
          }
        })
        .catch(() => {
          this.$message({
            message: "取消下架",
          });
        });
    },
    // 多选框选中的事件
    handleSelectionChange(selection) {
      let cooperationIds = [];
      if (selection && selection.length !== 0) {
        for (let i in selection) {
          cooperationIds.push(selection[i].cooperationId);
        }
      }
      this.cooperationIdList = cooperationIds;
    },
    //   操作列---下架
    previewInformation(rows) {
      let cooperationIdsX = [];
      this.$confirm("请确认是否下架？下架原因默认为：虚假/不可合作房源", "房源下架", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          cooperationIdsX.push(rows.cooperationId);
          let shelvesOk = await downList({ cooperationIds: cooperationIdsX });
          if (shelvesOk.code == 200 && shelvesOk.data.isSuccess) {
            await this.getList({ page: 1 });
            this.$message({
              message: "下架成功",
              type: "success",
            });
          }
        })
        .catch(() => {
          this.$message({
            message: "取消下架",
          });
        });
    },
    //得到列表数据
    async getList({ page }) {
      this.loading = true;
      let queryData = {
        page: page || this.queryParams.currentPage + 1,
        pageSize: this.queryParams.pageSize,
        realName: this.queryParams.realName,
        mobile: this.queryParams.mobile,
        shop: this.queryParams.brand,
        resblockName: this.queryParams.resblockName,
      };
      const res = await runToVerifyList(queryData);
      this.queryParams.currentPage = queryData.page;
      this.total = res.data.content.records;
      this.tableList = res.data.content.rows;
      // 自己整理房源标题
      // let tableListTmp = res.data.content.rows;
      // for (let i in tableListTmp) {
      //   if (tableListTmp[i].delegationType === "RENT") {
      //     tableListTmp[i].title = `${tableListTmp[i].resblockName}${tableListTmp[i].room}室${tableListTmp[i].hall}厅${tableListTmp[i].totalPrices}元/月${tableListTmp[i].buildSize}㎡`;
      //   } else {
      //     tableListTmp[i].title = `${tableListTmp[i].resblockName}${tableListTmp[i].room}室${tableListTmp[i].hall}厅${tableListTmp[i].totalPrices/10000}万${tableListTmp[i].buildSize}㎡`;
      //   }
      // }
      // this.tableList = tableListTmp
      this.loading = false;
    },
  },
};
</script>

<style scoped>
</style>